<template>
	<div class="card-container">
		<el-table
			:data="
				UserTable.slice(
					(currentPage - 1) * pagesize,
					currentPage * pagesize
				)
			"
			:default-sort="{ prop: 'acTimes', order: 'descending' }"
			stripe
			style="width: 100%; font-size: 20px"
			size="large"
		>
			<el-table-column type="index" :index="indexMethod" />
			<el-table-column
				v-for="{ prop, label } in colConfigs"
				:key="prop"
				:prop="prop"
				:label="label"
			></el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="UserTable.length"
		/>
	</div>
</template>

<script>
	import api from '../api/api.js';

	export default {
		name: 'User',
		data() {
			this.colConfigs = [
				{ prop: 'uid', label: '用户名' },
				{ prop: 'acTimes', label: '通过数' },
			];
			return {
				UserTable: [],
				currentPage: 1, // 初始页
				pagesize: 5, // 每页的数据
			};
		},
		created() {
			this.handleUserTable();
		},
		mounted() {},
		methods: {
			// 初始页currentPage, 初始每页数据数pagesize 和 数据data  (为了方便就不使用数据库limit进行处理了)
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			handleUserTable() {
				api.GetUser().then((res) => {
					for (var i = 0; i < res.data.length; i++) {
						this.UserTable.push({
							uid: res.data[i].uid,
							acTimes: res.data[i].acTimes,
						});
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '../_utility.scss';
	.card-container {
		@include basic-card;
		margin-top: 20px;
	}

	.el-pagination:deep {
		margin-top: 20px;
	}

	.el-pagination:deep .el-pager .number {
		font-size: 20px;
	}
</style>
